/**
 * 入参
 *
 */
import React, { PropTypes, PureComponent, Fragment } from 'react';
import {
  PrimaryC,
  DATA_ENTRY,
  InputNumberC,
  ModalC,
  PrimaryGhostC,
  codeType,
  TradingDirectC,
  TradingTypeC,
  InputC,
  SingleDateC,
  AdvancedSearch,
  ProductGroupSepC,
  SelectC,
  NoQueryC,
  TableC,
  FirstHeaderC,
  SecondHeaderC,
  TradingMarketC,
} from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Spin, Checkbox, Menu, Input, Button, message, Table, Divider, DatePicker, Select, Modal } from 'antd';
import style from '../index.less';
import { connect } from 'dva';
import _, { map } from 'lodash';

const { TextArea } = Input;
const MenuItem = Menu.Item;

class SxConditionC extends PureComponent {
  static defaultProps = {
    onRef: () => {},
  };
  state = {
    selectedItem: undefined, // 菜单选中项
    rightDataObj: {}, //右侧指标
  };
  componentDidMount() {
    this.props.onRef(this);
    this.state.tabType = this.props.tabType;
    this.loadData(this.props).then((obj) => {
      if (this.props.init) {
        this.backDetail(this.props, obj);
      }
    }); //加载指标数据
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.props.init) != JSON.stringify(nextProps.init) && this.state.tabType == nextProps.tabType) {
      if (nextProps.init) {
        //如果回填详情 则需要将checkbox 设置为true
        this.loadData(nextProps).then((obj) => {
          this.backDetail(nextProps, obj);
        });
      }
    }
  }
  //详情回填时的转换
  backDetail = (props, obj) => {
    const { dataSource = [] } = props;

    this.setState(
      {
        rightDataObj: { ...obj },
        selectedItem: dataSource.length ? dataSource[0].value : undefined,
      },
      () => {
        props.init.map((item) => {
          this.responseChange(item.indexType, item.indicator, true, item.value, item.screeningIndexType);
        });
        let tempData = []; //汇总所有选中项给设置组件
        for (const key in obj) {
          obj[key] &&
            obj[key].map((item) => {
              if (item.select) tempData.push(item);
            });
        }
        this.props.onChange('', tempData); //第一项时单个item,第二项是数组
      },
    );
  };
  //加载指标数据
  loadData = (props, type) => {
    const { loading, dataSource = [] } = props;
    if (!dataSource.length) return;
    const arr = _.cloneDeep(dataSource);
    const tempObj = {};
    arr.map((item) => {
      item.children &&
        item.children.map((child) => {
          child.select = child.select === undefined ? false : item.select;
          child.indexType = item.value;
        });
      tempObj[item.value] = item.children;
    });
    this.setState({
      rightDataObj: tempObj,
      selectedItem: dataSource.length ? dataSource[0].value : undefined,
    });
    return new Promise((resolve, reject) => {
      resolve(tempObj);
    });
  };
  //复选框点击事件
  checkboxChange = (checked, id) => {
    const { rightDataObj, selectedItem } = this.state;
    rightDataObj[selectedItem] &&
      rightDataObj[selectedItem].map((item) => {
        if (id == item.value) {
          //找出元素的选中项传给父组件
          item.select = checked; //选中项select标志位设置
          if (item.detailValue) delete item.detailValue; //回填之后 被删除 就去掉详情的值
          this.props.onChange(item);
        }
      });
    this.setState({
      rightDataObj: { ...rightDataObj },
    });
  };
  //条件设置组件 进行删除操作之后调用 修改checkbox 选中项
  responseChange = (indexType, id, select, detailValue, screeningIndexType) => {
    const { rightDataObj } = this.state;
    rightDataObj[indexType] &&
      rightDataObj[indexType].map((item) => {
        if (id == item.value) {
          item.select = select;
          if (detailValue !== undefined) {
            //回填详情时 添加详情的值
            item.detailValue = detailValue;
          } else {
            if (item.detailValue) delete item.detailValue; //回填之后 被删除 就去掉详情的值
          }

          if (screeningIndexType) {
            item.screeningIndexType = screeningIndexType;
          }
        }
      });
    this.setState({
      rightDataObj: { ...rightDataObj },
    });
  };
  //清空页面
  reset = () => {
    const { rightDataObj } = this.state;
    const { dataSource = [] } = this.props;
    for (const key in rightDataObj) {
      rightDataObj[key].map((item) => {
        item.select = false; //重置为false 全部未选中
        delete item.detailValue;
        delete item.screeningIndexType;
      });
    }
    this.setState({
      selectedItem: dataSource.length ? dataSource[0].value : undefined, // 菜单选中项
      rightDataObj: { ...rightDataObj }, //右侧指标
    });
  };
  render() {
    const { dataSource = [] } = this.props;
    const { selectedItem, rightDataObj } = this.state;
    return (
      <div className={style.shaixuan}>
        {/* 左侧 */}
        <div className={style.left}>
          <Menu mode='inline' selectedKeys={[selectedItem]} onClick={(val) => this.setState({ selectedItem: val.key })}>
            {dataSource &&
              dataSource.map((item) => (
                <MenuItem key={item.value} value={item.value}>
                  {item.title}
                </MenuItem>
              ))}
          </Menu>
        </div>
        <div className={style.right}>
          <Row type={'flex'}>
            {rightDataObj[selectedItem] &&
              rightDataObj[selectedItem].map((item, key) => {
                return (
                  <Col xl={4} xxl={3} className={'checkboxCls'} key={item.value}>
                    <Checkbox
                      checked={item.select}
                      onChange={(e) => {
                        this.checkboxChange(e.target.checked, item.value);
                      }}
                    >
                      {item.title}
                    </Checkbox>
                  </Col>
                );
              })}
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ AssetPreparationM, userM: user, loading }) => ({
  AssetPreparationM,
  user,
  loading,
}))(SxConditionC);
